<template>
	<view class="page">
		<view class="header">
			<view style="">
				<image src="@/static/white_logo.png" mode=""></image>
				<view>
					<view>
						{{appName}}
					</view>
					<view style="margin-top: 10rpx;">
						{{appDes}}
					</view>
				</view>
			</view>

		</view>
		<view class="bg">

		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;">
			<image 
			      :src="qrCodeUrl" 
			      mode="widthFix" 
			      show-menu-by-longpress
			      style="width: 450rpx; height: 450rpx;"
			    />
			    <text v-if="!qrCodeUrl">生成中...</text>
		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;font-size: 32rpx;font-weight: 600;color: #a5a5a5;margin-top: 100rpx;">
			零点管家
		</view>
		<view style="display: flex;flex-direction: row;justify-content: center;font-size: 28rpx;font-weight: 500;color: #a5a5a5;margin-top: 40rpx;">
			请长按识别进入下载《零点管家》
		</view>
	</view>
</template>

<script>
	import QRCode from 'qrcode'
	export default {
		data() {
			return {
				appName: '零点管家', //app名称
				appDes: '零点娱乐酒吧管理系统', //app简述
				 qrCodeUrl: ''
			}
		},
		onLoad() {
			// 动态设置页面标题
			this.setTitle()
			this.generateQRCode('https://app.skunld.net/h5')
		},
		// onReady() {
		// 	// 获取uQRCode实例
		// 	var qr = new UQRCode();
		// 	// 设置二维码内容
		// 	qr.data = "https://app.skunld.net/h5";
		// 	// 设置二维码大小，必须与canvas设置的宽高一致
		// 	qr.size = 200;
		// 	// 调用制作二维码方法
		// 	qr.make();
		// 	// 获取canvas上下文
		// 	var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入
		// 	// 设置uQRCode实例的canvas上下文
		// 	qr.canvasContext = canvasContext;
		// 	// 调用绘制方法将二维码图案绘制到canvas上
		// 	qr.drawCanvas();
		// },
		methods: {
			setTitle() {
				uni.setNavigationBarTitle({
					title: this.appName + 'APP下载'
				});
			},
			async generateQRCode(text) {
			      try {
			        this.qrCodeUrl = await QRCode.toDataURL(text, {
			          errorCorrectionLevel: 'H',
			          width: 300,
			          margin: 1
			        })
			      } catch (err) {
			        console.error('生成二维码失败:', err)
			      }
			    },
			    handleLongPress() {
			      uni.showToast({
			        title: '长按识别二维码',
			        icon: 'none'
			      })
			    }
		}
	}
</script>

<style lang="less">
	@BgColor: #232323; //主题背景色

	.page {
		background-color: #f8f8f8;
		width: 100vw;
		height: 100vh;
		overflow: hidden;

		.header {
			width: 100vw;
			height: 350upx;
			background-color: @BgColor;
			display: flex;
			justify-content: center;

			>view {
				display: flex;
				flex-direction: row;
				padding-top: 100rpx;

				image {
					width: 120upx;
					height: 120upx;
					margin-right: 30upx;
				}

				>view {
					height: 120upx;
					color: #fff;
					font-weight: 700;
					display: flex;
					flex-direction: column;
					justify-content: center;

					view:nth-child(1) {
						font-size: 34upx;
					}

					view:nth-child(2) {
						font-size: 28upx;
					}
				}
			}

		}

		.bg {
			width: 100vw;
			height: 210upx;
			background-image: url(../../static/bg.png);
			background-size: 100%;
			background-position: center bottom;
			background-repeat: no-repeat;
			position: relative;
			left: 0;
			bottom: 160rpx;
		}

		.content {
			position: relative;
			top: 230rpx;
			transform: translateY(-54%);
			overflow: hidden;
			padding: 0 20rpx;

			image {
				width: 750upx;
				height: 750upx;
			}
		}

		.btns {
			position: fixed;
			bottom: 0;
			width: 100vw;
			// left: 20rpx;
			// right: 20rpx;
			height: 200upx;
			align-items: center;
			background: #000;

			>view {
				width: 340rpx;
				height: 120upx;
				background-color: @BgColor;
				color: #FFFFFF;
				display: flex;
				margin: 0 auto;
				border-radius: 15upx;
				box-shadow: 0 10upx 24upx -10upx @BgColor;
				;

				.icon {
					width: 120upx;
					height: 120upx;
					display: flex;
					justify-content: center;
					align-items: center;
				}

				.text {
					display: flex;
					flex-direction: column;
					justify-content: center;

					view:nth-child(1) {
						font-size: 34upx;
					}

					view:nth-child(2) {
						font-size: 28upx;
					}
				}

				image {
					width: 50upx;
					height: 50upx;
				}
			}

			>view:nth-child(2) {
				margin-bottom: 0upx;
			}
		}

		.wx {
			position: fixed;
			left: 0;
			top: 0;
			background-color: rgba(0, 0, 0, .7);
			width: 100vw;
			height: 100vh;
			background-image: url(../../static/wx.png);
			background-size: 100%;
			background-position: center 100upx;
			background-repeat: no-repeat;
		}
	}
</style>